<template>
  <div>
    {{title}}
    <nuxt-link to="/user">user</nuxt-link>

    <!-- <ul>
      <li v-for="li in list">
        {{li.a}} - {{li.b}}
      </li>
    </ul> -->

    <!-- <div>{{msg}}</div> -->

    <div>{{host}}</div>

    <div>{{counter}}  <button @click="increment">+</button></div>

    <ul>
      <li v-for="li in list">
        {{li.text}}
      </li>
    </ul>

    <div><button @click="add('aaa')"> add list</button></div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  data() {
    return {
      title: 'hello world'
    }
  },

  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ]
    }
  },

  async asyncData({ req, res }) {
    // console.log(args)
    // let result = await axios.get('http://localhost:3000/data.json')
    // return {
    //   // list: result.data.data
    //   msg: 'aabbcc'
    // }

    if (process.server) {
      return { host: req.headers.host }
    }

    return {}
  },

  computed: {
    ...mapState(['counter']),
    ...mapState('todo', ['list'])
  },

  methods: {
    ...mapMutations(['increment']),
    ...mapMutations('todo', ['add']),
    ...mapActions('todo', ['loadData'])
  },

  mounted() {
    // this.loadData()
  },

  async fetch({ store, params }) {
    // return axios.get('http://my-api/stars').then(res => {
    //   store.commit('setStars', res.data)
    // })

    let result = await new Promise((resolve) => {
      setTimeout(() => {
        resolve('第一个任务')
      }, 2000)
    })

    store.commit('todo/add', result)
    
    return result
  }
}
</script>

<style lang='stylus' scoped>

</style>